<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>摘要文件名重命名测试</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            margin: 20px;
            background-color: #f5f5f5;
        }
        .test-container {
            max-width: 800px;
            margin: 0 auto;
            background: white;
            padding: 20px;
            border-radius: 8px;
            box-shadow: 0 2px 8px rgba(0,0,0,0.1);
        }
        .test-section {
            margin-bottom: 30px;
            padding: 15px;
            border: 1px solid #e8e8e8;
            border-radius: 6px;
        }
        .test-title {
            color: #1890ff;
            margin-bottom: 10px;
            font-weight: bold;
        }
        .test-item {
            margin: 10px 0;
            padding: 8px;
            background: #f9f9f9;
            border-radius: 4px;
        }
        .status {
            display: inline-block;
            padding: 2px 8px;
            border-radius: 4px;
            font-size: 12px;
            font-weight: bold;
        }
        .status.completed {
            background: #f6ffed;
            color: #52c41a;
            border: 1px solid #b7eb8f;
        }
        .status.new {
            background: #fff7e6;
            color: #fa8c16;
            border: 1px solid #ffd591;
        }
        .code-block {
            background: #f5f5f5;
            border: 1px solid #d9d9d9;
            border-radius: 4px;
            padding: 10px;
            font-family: 'Courier New', monospace;
            font-size: 12px;
            margin: 10px 0;
            overflow-x: auto;
        }
        .highlight {
            background: #fff7e6;
            padding: 2px 4px;
            border-radius: 2px;
        }
        .before-after {
            display: flex;
            gap: 20px;
            margin: 10px 0;
        }
        .before, .after {
            flex: 1;
            padding: 10px;
            border-radius: 4px;
        }
        .before {
            background: #fff2f0;
            border: 1px solid #ffccc7;
        }
        .after {
            background: #f6ffed;
            border: 1px solid #b7eb8f;
        }
        .example-table {
            width: 100%;
            border-collapse: collapse;
            margin: 10px 0;
        }
        .example-table th,
        .example-table td {
            border: 1px solid #d9d9d9;
            padding: 8px;
            text-align: left;
        }
        .example-table th {
            background: #f5f5f5;
            font-weight: bold;
        }
        .example-table .original {
            color: #ff4d4f;
        }
        .example-table .renamed {
            color: #52c41a;
        }
    </style>
</head>
<body>
    <div class="test-container">
        <h1>📝 摘要文件名重命名测试</h1>
        
        <div class="test-section">
            <div class="test-title">🎯 重命名规则</div>
            <div class="test-item">
                <strong>原格式：</strong> 银行-委案商-地区X件调解案.xlsx
            </div>
            <div class="test-item">
                <strong>新格式：</strong> 银行X件调解案-【小时/分钟】.xlsx
            </div>
            <div class="test-item">
                <strong>时间格式：</strong> 24小时制，格式为 HH/MM（如：17/19 表示17点19分）
            </div>
        </div>

        <div class="test-section">
            <div class="test-title">📋 重命名示例</div>
            <table class="example-table">
                <thead>
                    <tr>
                        <th>原文件名</th>
                        <th>新文件名（假设当前时间17:19）</th>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <td class="original">兴业银行-臻隆-良庆1件调解案.xlsx</td>
                        <td class="renamed">兴业银行1件调解案-17/19.xlsx</td>
                    </tr>
                    <tr>
                        <td class="original">农信社-好瑞迪-良庆3件调解案.xlsx</td>
                        <td class="renamed">农信社3件调解案-17/19.xlsx</td>
                    </tr>
                    <tr>
                        <td class="original">平安银行-德睿-良庆5件调解案.xlsx</td>
                        <td class="renamed">平安银行5件调解案-17/19.xlsx</td>
                    </tr>
                    <tr>
                        <td class="original">中信银行-恒银-良庆2件调解案.xlsx</td>
                        <td class="renamed">中信银行2件调解案-17/19.xlsx</td>
                    </tr>
                </tbody>
            </table>
        </div>

        <div class="test-section">
            <div class="test-title">🔧 技术实现</div>
            <div class="test-item">
                <strong>文件名生成函数：</strong>
                <div class="code-block">
const generateSummaryFileName = (record: any) => {
  try {
    // 获取当前时间
    const now = new Date();
    const hours = now.getHours().toString().padStart(2, '0');
    const minutes = now.getMinutes().toString().padStart(2, '0');
    const timeStr = `${hours}/${minutes}`;
    
    // 从batchName中提取银行名称和案件数量
    const batchName = record.batchName || '';
    
    // 使用正则表达式匹配银行名称和案件数量
    // 匹配模式：银行名-委案商-地区X件调解案
    const match = batchName.match(/^([^-]+)-[^-]+-[^-]*(\d+)件调解案/);
    
    if (match) {
      const bankName = match[1]; // 银行名称
      const caseCount = match[2]; // 案件数量
      return `${bankName}${caseCount}件调解案-${timeStr}.xlsx`;
    }
    
    // 如果匹配失败，使用默认格式
    const defaultName = batchName.replace(/\.xlsx?$/, '') || '摘要文件';
    return `${defaultName}-${timeStr}.xlsx`;
    
  } catch (error) {
    console.error('生成文件名失败:', error);
    // 出错时返回带时间戳的默认文件名
    const now = new Date();
    const hours = now.getHours().toString().padStart(2, '0');
    const minutes = now.getMinutes().toString().padStart(2, '0');
    return `摘要文件-${hours}/${minutes}.xlsx`;
  }
};
                </div>
            </div>
        </div>

        <div class="test-section">
            <div class="test-title">🔍 正则表达式匹配</div>
            <div class="test-item">
                <strong>主要匹配模式：</strong>
                <div class="code-block">
/^([^-]+)-[^-]+-[^-]*(\d+)件调解案/
                </div>
                <ul>
                    <li><span class="highlight">([^-]+)</span> - 匹配银行名称（第一个连字符前的部分）</li>
                    <li><span class="highlight">-[^-]+-</span> - 匹配委案商部分（两个连字符之间的部分）</li>
                    <li><span class="highlight">[^-]*</span> - 匹配地区部分（可选，可能包含连字符）</li>
                    <li><span class="highlight">(\d+)</span> - 匹配案件数量（数字）</li>
                    <li><span class="highlight">件调解案</span> - 匹配固定后缀</li>
                </ul>
            </div>
            <div class="test-item">
                <strong>备用匹配模式：</strong>
                <div class="code-block">
/^([^-]+)(\d+)件调解案/
                </div>
                <p>用于匹配简化格式：银行名X件调解案</p>
            </div>
        </div>

        <div class="test-section">
            <div class="test-title">✅ 实现效果</div>
            <div class="test-item">
                <span class="status completed">✅ 完成</span>
                <strong>文件名重命名</strong> - 按照指定格式重命名下载文件
            </div>
            <div class="test-item">
                <span class="status completed">✅ 完成</span>
                <strong>时间戳添加</strong> - 自动添加当前时间戳
            </div>
            <div class="test-item">
                <span class="status completed">✅ 完成</span>
                <strong>格式兼容</strong> - 支持多种文件名格式
            </div>
            <div class="test-item">
                <span class="status completed">✅ 完成</span>
                <strong>错误处理</strong> - 匹配失败时使用默认格式
            </div>
        </div>

        <div class="test-section">
            <div class="test-title">🧪 测试步骤</div>
            <div class="test-item">
                1. 访问案件审核页面 <code>http://localhost:5174/review</code>
            </div>
            <div class="test-item">
                2. 找到有"下载摘要"按钮的案件记录
            </div>
            <div class="test-item">
                3. 点击"下载摘要"按钮
            </div>
            <div class="test-item">
                4. 确认下载对话框
            </div>
            <div class="test-item">
                5. 检查下载的文件名是否符合新格式
            </div>
            <div class="test-item">
                6. 验证文件名包含银行名称、案件数量和时间戳
            </div>
        </div>

        <div class="test-section">
            <div class="test-title">🔍 测试用例</div>
            <div class="test-item">
                <strong>测试用例1：标准格式</strong>
                <ul>
                    <li>输入：兴业银行-臻隆-良庆1件调解案.xlsx</li>
                    <li>期望：兴业银行1件调解案-17/19.xlsx</li>
                </ul>
            </div>
            <div class="test-item">
                <strong>测试用例2：多案件</strong>
                <ul>
                    <li>输入：农信社-好瑞迪-良庆3件调解案.xlsx</li>
                    <li>期望：农信社3件调解案-17/19.xlsx</li>
                </ul>
            </div>
            <div class="test-item">
                <strong>测试用例3：简化格式</strong>
                <ul>
                    <li>输入：平安银行5件调解案.xlsx</li>
                    <li>期望：平安银行5件调解案-17/19.xlsx</li>
                </ul>
            </div>
            <div class="test-item">
                <strong>测试用例4：异常格式</strong>
                <ul>
                    <li>输入：未知格式文件名.xlsx</li>
                    <li>期望：未知格式文件名-17/19.xlsx</li>
                </ul>
            </div>
        </div>

        <div class="test-section">
            <div class="test-title">⚠️ 注意事项</div>
            <div class="test-item">
                • 时间戳基于下载时的当前时间，不是文件创建时间
            </div>
            <div class="test-item">
                • 文件名中的连字符会被正确解析和重组
            </div>
            <div class="test-item">
                • 如果正则匹配失败，会使用原始文件名加时间戳
            </div>
            <div class="test-item">
                • 时间格式为24小时制，分钟数不足两位会补零
            </div>
        </div>

        <div class="test-section">
            <div class="test-title">🎯 预期结果</div>
            <div class="test-item">
                <span class="status completed">✅ 完成</span>
                <strong>格式转换</strong> - 文件名按新格式重命名
            </div>
            <div class="test-item">
                <span class="status completed">✅ 完成</span>
                <strong>时间戳</strong> - 自动添加当前时间戳
            </div>
            <div class="test-item">
                <span class="status completed">✅ 完成</span>
                <strong>兼容性</strong> - 支持多种输入格式
            </div>
            <div class="test-item">
                <span class="status completed">✅ 完成</span>
                <strong>用户体验</strong> - 下载文件名更加规范和易识别
            </div>
        </div>
    </div>
</body>
</html>
